"use client"

import { useState, useMemo } from "react"
import { CategorySidebar } from "@/components/category-sidebar"
import { ProductGrid } from "@/components/product-grid"
import { categories, products } from "@/lib/data"
import { useCart } from "@/hooks/use-cart"
import type { Category } from "@/types"
import { Button } from "@/components/ui/button"
import { ShoppingCart } from "lucide-react"
import { useRouter } from "next/navigation"

export default function HomePage() {
  const [selectedCategory, setSelectedCategory] = useState<Category>("泡面")
  const { items, addItem, updateQuantity, total, itemCount } = useCart()
  const router = useRouter()

  const filteredProducts = useMemo(() => {
    return products.filter((product) => product.category === selectedCategory)
  }, [selectedCategory])

  const cartItemsMap = useMemo(() => {
    return items.reduce(
      (acc, item) => {
        acc[item.id] = item.quantity
        return acc
      },
      {} as { [key: string]: number },
    )
  }, [items])

  const handleCheckout = () => {
    if (itemCount > 0) {
      router.push("/checkout")
    }
  }

  return (
    <div className="h-screen bg-background flex flex-col">
      {/* Header */}
      <header className="flex-shrink-0 bg-card border-b border-border">
        <div className="flex items-center justify-between px-4 py-3">
          <div>
            <h1 className="text-lg font-semibold text-balance">宿舍泡面订餐</h1>
            <p className="text-xs text-muted-foreground">美味送到宿舍门口</p>
          </div>

          <Button
            variant="outline"
            size="sm"
            className="relative bg-transparent"
            onClick={handleCheckout}
            disabled={itemCount === 0}
          >
            <ShoppingCart className="h-4 w-4 mr-1" />
            <span className="text-sm">购物车</span>
            {itemCount > 0 && (
              <span className="absolute -top-2 -right-2 bg-primary text-primary-foreground text-xs rounded-full h-5 w-5 flex items-center justify-center">
                {itemCount}
              </span>
            )}
          </Button>
        </div>
      </header>

      {/* Main Content */}
      <div className="flex flex-1 min-h-0">
        <CategorySidebar
          categories={categories}
          selectedCategory={selectedCategory}
          onCategorySelect={setSelectedCategory}
        />

        <ProductGrid
          products={filteredProducts}
          onAddToCart={addItem}
          onUpdateQuantity={updateQuantity}
          cartItems={cartItemsMap}
        />
      </div>

      {/* Bottom Cart Summary */}
      {itemCount > 0 && (
        <div className="flex-shrink-0 bg-card border-t border-border p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-muted-foreground">已选 {itemCount} 件商品</p>
              <p className="font-semibold text-lg">合计: ¥{total.toFixed(2)}</p>
            </div>

            <Button size="lg" className="px-8" onClick={handleCheckout}>
              去结算
            </Button>
          </div>
        </div>
      )}
    </div>
  )
}
